<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Global CPQ System</title>
  <style>
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
        }

        to {
            -webkit-transform: rotate(1turn);
            transform: rotate(1turn)
        }
    }

    @keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
        }

        to {
            -webkit-transform: rotate(1turn);
            transform: rotate(1turn)
        }
    }
    #preloader-bg {
        z-index: 1000;
        background: #2e3b50;
        opacity: .8
    }

    #preloader,#preloader-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    #preloader {
        z-index: 1003;
        background: transparent
    }

    #preloader>div {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #f95373;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite
    }

    #preloader>div:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #00abff;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite
    }

    #preloader>div:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #e7ba08;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite
    }

    .site-wrapper + .initial-loading,
    .site-container + .initial-loading {
      display: none;
    }

  </style>
  <% if (process.env.NODE_ENV === 'production') { %>
  <!-- 生产环境 -->
  <script>document.write('<script src="./config/index.js?t=' + new Date().getTime() + '"><\/script>');</script>
  <% }else { %>
  <!-- 开发环境 -->
  <link rel="shortcut icon" type="image/x-icon" href="./static/img/favicon.ico">
  <script src="./static/config/index.js"></script>
  <script src="./static/plugins/mock-1.0.0-beta3/mock-min.js"></script>
  <script src="./static/plugins/echarts-3.8.5/echarts.common.min.js"></script>
  <script src="./static/plugins/ueditor-1.4.3.3/ueditor.config.js"></script>
  <script src="./static/plugins/ueditor-1.4.3.3/ueditor.all.min.js"></script>
  <script src="./static/plugins/ueditor-1.4.3.3/lang/zh-cn/zh-cn.js"></script>
  <% } %>
</head>

<body>
  <div id="app">

  </div>

  <!-- Loading screen -->
  <div class="initial-loading">
      <div id="preloader-bg"></div>
      <div id="preloader"><div></div></div>
    </div>
    <!-- // Loading screen -->

</body>

</html>
